<template>
	<div class="job">
		<div class="jobcon">
			<el-form ref="form" :model="form" class='elform' label-width="80px">
				<p><img src="../../assets/image/navicon/1.png" /><span>基本信息</span></p>
				<el-form-item label="真实姓名">
					<el-col :span='11'>
						<el-input v-model="form.name"></el-input>
					</el-col>
					<el-col :span='10' :push='1'>
						<el-radio-group v-model="form.sex">
							<el-radio label="男"></el-radio>
							<el-radio label="女"></el-radio>
						</el-radio-group>
					</el-col>
				</el-form-item>

				<el-form-item label="出生日期">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="form.chushengriqi" style="width: 100%;"  format="yyyy 年 MM 月 dd 日" value-format="yyyy年MM月dd日" ></el-date-picker>
					</el-col>
					<el-col :span="11" :push='2'>
						<el-select v-model="form.xueli" placeholder="请选择你的学历信息">
							<el-option label="初中" value="初中"></el-option>
							<el-option label="高中" value="高中"></el-option>
							<el-option label="中专" value="中专"></el-option>
							<el-option label="大专" value="大专"></el-option>
							<el-option label="本科" value="本科"></el-option>
							<el-option label="研究生" value="研究生"></el-option>
							<el-option label="硕士" value="硕士"></el-option>
						</el-select>
					</el-col>
				</el-form-item>

				<el-form-item label="现所在地">
					<el-col :span='11'>
						<div class="block">
							<el-cascader :options="city" v-model="selectedCity" style="width: 100%;" @change="handleChange">
							</el-cascader>
						</div>
					</el-col>
				</el-form-item>

				<el-form-item label="户籍地址">
					<el-col :span='11'>
						<div class="block">
							<el-cascader :options="city" v-model="selectedCity2" style="width: 100%;" @change="handleChange2">
							</el-cascader>
						</div>
					</el-col>
				</el-form-item>
				<!-----------------------这是一条华丽的分割线-------------------->
				<el-form-item label="工作年限">
					<el-select v-model="form.gongling" placeholder="请选择">
						<el-option label="应届毕业生" value="应届毕业生"></el-option>
						<el-option label="1年" value="1年"></el-option>
						<el-option label="2年" value="2年"></el-option>
						<el-option label="3年" value="3年"></el-option>
						<el-option label="4年" value="4年"></el-option>
						<el-option label="5年" value="5年"></el-option>						
						<el-option label="6年" value="6年"></el-option>						
					</el-select>
				</el-form-item>
				<el-form-item label="目前状态">
					<el-select v-model="form.current" placeholder="请选择">
						<el-option label="目前在职，但是想考虑换一个工作环境" value="目前在职，但是想考虑换一个工作环境"></el-option>
						<el-option label="已离职，随时可以入职" value="已离职，随时可以入职"></el-option>
						<el-option label="已离职，暂时不考虑入职" value="已离职，暂时不考虑入职"></el-option>						
					</el-select>
				</el-form-item>
				<el-form-item label="联系方式">
					<el-col :span='6'>
						<el-input v-model="form.tel" @blur='telyan'></el-input>
					</el-col>
				</el-form-item>
				<p><img src="../../assets/image/navicon/4.png" /><span>技能管理</span></p>

				<el-form-item label="证书管理">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.zhengshu"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="学历经历">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.xuelijingli"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="培训经历">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.peixunjingli"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="劳动技能">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.laodongjineng"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="社会关系">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.shehuiguanxi"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="智能鉴定">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.zhinengjianding"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="个人信用">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.gerenxinyong"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="职称资格">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.zhichengzige"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="现任岗位">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.xianrengangwei"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="出国情况">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.chuguoqingkuang"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="奖罚信息">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.jiangfaxinxi"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="健康情况">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.jiankangzhuangkuang"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="特长证书">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.techang"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="家庭成员">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.jiatingchengyuan"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="合同管理">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.hetongguanli"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="人事代理">
					<el-col :span='22'>
						<el-input type="textarea" v-model="form.renshidaili"></el-input>
					</el-col>
				</el-form-item>
				<div style="text-align: center;">
					<el-button type="primary" @click="onSubmit()">提交</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>
<script type="text/javascript">
	import { city, shengshixian } from "@/assets/js/city";

	export default {
		data() {
			return {
				city: city,				
				selectedCity: [],
				selectedCity2: [],
				form: {
					name: '',
					sex: '',
					chushengriqi: '',
					xueli: '',
					xiansuozaidi: null,
					hujidi: null,
					gongling: '',
					current: '',
					tel: '',
					zhengshu: '',
					xuelijingli: '',
					peixunjingli: '',
					laodongjineng: '',
					shehuiguanxi: '',
					zhinengjianding: '',
					gerenxinyong: '',
					zhichengzige: '',
					xianrengangwei: '',
					chuguoqingkuang: '',
					jiangfaxinxi: '',
					jiankangzhuangkuang: '',
					techang: '',
					jiatingchengyuan: '',
					hetongguanli: '',
					renshidaili: ''
				}
			}
		},
		created() {
			
		},
		methods: {
			onSubmit() {
				console.log(this.form);
				this.$message({
					message: '提交成功',
					type: 'success'
				});
				//				this.$emit('closejob', 'close');

			},
			handleChange(value) {
				let objssx = shengshixian(value);
				let arr = []
				for(let key in objssx) {
					arr.push(objssx[key]);
				}
				this.form.xiansuozaidi = arr.join(' ');

			},
			handleChange2(value) {
				let objssx = shengshixian(value);
				let arr = []
				for(let key in objssx) {
					arr.push(objssx[key]);
				}
				this.form.hujidi = arr.join(' ');

			},

			telyan(e) {
				//				去除手机号空格
				let tel = this.form.tel.trim();
				let reg = /^1[3|4|5|8][0-9]\d{4,8}$/
				if(!reg.test(tel)) {
					this.$notify.error({
						title: '错误',
						message: '你输入的手机号不合法'
					});
				}

			}
		},
		computed: {

		},
		watch: {
//			element-ui有时间格式化不需要处理了			
//			chushengriqi: function(xin, old) {
//				console.log(xin,old);
//			},

		},
		mounted() {

		}
	}
</script>
<style lang="scss" scoped>
	.job {
		position: absolute;
		width: 100%;
		left: 0%;
		right: 0%;
		top: 40px;
		bottom: 20px;
		background-color: white;
		.jobcon {
			width: 100%;
			height: 100%;
			background-color: white;
			overflow: auto;
			.tijiao {
				text-align: center;
			}
		}
		.elform {
			position: absolute;
			top: 16px;
			left: 20px;
			right: 0px;
			bottom: 10px;
			overflow: auto;
			p {
				margin-bottom: 10px;
				img {
					width: 18px;
					margin-top: 10px;
					display: inline-block;
					margin-right: 10px;
				}
				span {
					line-height: 30px;
					font-size: 17px;
				}
			}
		}
	}
</style>